<template>
	<view class="ai-assistant">
		<u-navbar :is-back="false" title="小知" :background="navbarBg" :border-bottom="false" />
		<view class="hero section-card hero-card">
			<view class="brand-row">
				<view class="brand-meta">
					<view class="brand-name">小知</view>
					<view class="brand-subtitle">AI旅智官</view>
				</view>
				<view class="brand-meta">
					<view class="brand-badge">企业级部署</view>
					<view class="brand-tagline">GoTravel LLM Stack 3.2</view>
				</view>
			</view>
			<view class="hero-desc">
				部署企业自有大模型集群，提供行程生成、即时问答与多模态洞察，助力全域旅游与目的地服务智能升级。
			</view>
			<view class="hero-tags">
				<view class="tag">千亿参数</view>
				<view class="tag">多模态推理</view>
				<view class="tag">企业私域部署</view>
			</view>
		</view>

		<view class="section-card status-card">
			<view class="status-header">
				<text>大模型部署状态</text>
				<text class="status-pill">在线</text>
			</view>
			<view class="status-row">
				<text>算力集群</text>
				<text>A100 x4 · GPU POD</text>
			</view>
			<view class="status-row">
				<text>上下文长度</text>
				<text>128K Tokens</text>
			</view>
			<view class="status-row">
				<text>平均响应时延</text>
				<text>{{ latency }} ms</text>
			</view>
		</view>

		<view class="section-card pipeline-card">
			<view class="pipeline-header">
				<text>推理链路</text>
				<text class="pipeline-version">v3.2</text>
			</view>
			<view class="pipeline-body">
				<view
					v-for="(node, index) in pipeline"
					:key="node.title"
					class="pipeline-node"
				>
					<view class="node-index">{{ index + 1 }}</view>
					<view class="node-content">
						<view class="node-title">{{ node.title }}</view>
						<view class="node-desc">{{ node.desc }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="section-card ability-grid">
			<view
				class="ability-item"
				v-for="item in abilities"
				:key="item.title"
			>
				<view class="ability-head">
					<view class="ability-title">{{ item.title }}</view>
					<view class="ability-metric">{{ item.metric }}</view>
				</view>
				<view class="ability-desc">{{ item.desc }}</view>
			</view>
		</view>

		<view class="section-card scenario-card">
			<view
				class="scenario-item"
				v-for="scenario in scenarios"
				:key="scenario.name"
			>
				<view class="scenario-name">{{ scenario.name }}</view>
				<view class="scenario-desc">{{ scenario.desc }}</view>
				<view class="scenario-tip">{{ scenario.tip }}</view>
			</view>
		</view>

		<view class="section-card quick-card">
			<view class="quick-title">快捷指令</view>
			<view class="chip-group">
				<view
					class="chip"
					v-for="item in shortcuts"
					:key="item"
					@click="applyShortcut(item)"
				>
					{{ item }}
				</view>
			</view>
		</view>

		<view class="section-card insight-card">
			<view class="insight-header">
				<view class="insight-title">实时洞察</view>
				<view class="insight-pulse">LIVE</view>
			</view>
			<view class="insight-grid">
				<view
					class="insight-item"
					v-for="item in insights"
					:key="item.label"
				>
					<view class="insight-label">{{ item.label }}</view>
					<view class="insight-value">{{ item.value }}</view>
					<view class="insight-foot">{{ item.detail }}</view>
				</view>
			</view>
		</view>

		<scroll-view class="section-card chat-panel" scroll-y :scroll-top="scrollTop">
			<view class="chat-header">
				<view>
					<view class="chat-title">小知 · 会话空间</view>
					<view class="chat-subtitle">支持多轮上下文、行程编排与运营问答</view>
				</view>
				<view class="chat-status">
					<view class="dot-online" />
					在线
				</view>
			</view>
			<view
				v-for="(msg, index) in messages"
				:key="index"
				:class="['bubble', msg.role]"
			>
				<view class="bubble-role">{{ msg.role === 'user' ? '我' : '小知' }}</view>
				<text class="bubble-text">{{ msg.text }}</text>
			</view>
			<view v-if="loading" class="typing">
				<view class="dot" />
				<view class="dot" />
				<view class="dot" />
			</view>
		</scroll-view>

		<view class="section-card composer">
			<u-input
				v-model="prompt"
				placeholder="比如：帮我定制一条三亚亲子游线路"
				border="none"
				class="composer-input"
				:custom-style="inputStyle"
				placeholder-style="color: rgba(0,0,0,0.35); font-size: 26rpx; letter-spacing: 1rpx;"
				:disabled="loading"
				clearable
			/>
			<u-button
				type="primary"
				class="composer-btn"
				:disabled="!prompt || loading"
				@click="sendMessage"
			>
				{{ loading ? '思考中...' : '发送' }}
			</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBg: { background: 'linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%)', color: '#2c3e50' },
			latency: 132,
			prompt: '',
			loading: false,
			scrollTop: 0,
			inputStyle: {
				color: '#2c3e50',
				fontSize: '28rpx',
				letterSpacing: '1rpx',
				padding: '0 24rpx',
			},
			userCity: uni.getStorageSync('currentCity') || '杭州',
			cityProfiles: {
				杭州: {
					name: '杭州',
					weather: '多云转晴，体感 18-26℃，周末午后可能有短时阵雨。',
					attractions: ['西湖十景', '良渚古城', '宋城千古情'],
					smartActions: '安排亲子互动课程，夜间可在天目里举办沉浸式市集，并同步开启淳安民宿直播带货。',
				},
				三亚: {
					name: '三亚',
					weather: '午后阵雨概率 40%，气温 26-31℃，海风较大需关注浪涌。',
					attractions: ['亚龙湾海岸', '蜈支洲岛', '鹿回头公园'],
					smartActions: '建议错峰安排海岛巡游与亲子潜水，傍晚配合椰梦长廊音乐会引流，结合免税城做联名秒杀。',
				},
				成都: {
					name: '成都',
					weather: '阴天为主，局地小雨，气温 19-23℃，适合城市漫游。',
					attractions: ['宽窄巷子', '大熊猫繁育基地', '都江堰青城山'],
					smartActions: '结合周末主题活动，可在文殊院街区布置国潮市集，推出熊猫夜游路线与锅锅香美食打卡。',
				},
			},
			travelMatrix: {
				'杭州-三亚': {
					mode: '萧山直飞 + 市区驿站巴士',
					duration: '单程约 4 小时（含接驳）',
					route: ['杭州萧山机场 → 三亚凤凰国际机场', '机场快线 → 亚龙湾/海棠湾度假区'],
					budget: {
						transport: 2200,
						daily: 1600,
						days: 3,
					},
				},
				'杭州-成都': {
					mode: '高铁 + 城市地铁',
					duration: '单程高铁 11 小时',
					route: ['杭州东站 → 成都东站', '地铁 2/7 号线 → 市区酒店'],
					budget: {
						transport: 1200,
						daily: 900,
						days: 3,
					},
				},
				'杭州-杭州': {
					mode: '城市公交 + 自驾/网约车',
					duration: '30-60 分钟抵达核心景点',
					route: ['地铁 1 号线串联湖滨商圈', '自驾前往良渚/富阳山地'],
					budget: {
						transport: 200,
						daily: 800,
						days: 2,
					},
				},
				'三亚-杭州': {
					mode: '返程直飞 + 轨道交通',
					duration: '单程 4 小时',
					route: ['三亚凤凰机场 → 杭州萧山', '机场大巴/自驾返城'],
					budget: {
						transport: 2100,
						daily: 1500,
						days: 3,
					},
				},
			},
			messages: [
				{
					role: 'assistant',
					text: '你好，我是小知，可为你提供全链路AI旅行规划与运营洞察。需要我从部署、行程还是数据预测方面帮忙？',
				},
			],
			pipeline: [
				{ title: '多端数据采集', desc: 'OTA、文旅局、微信小程序多渠道实时汇聚，自动脱敏与标签标准化。' },
				{ title: '大模型语义编排', desc: '行业 Prompt 编排中心结合知识图谱，完成指令治理与角色设定。' },
				{ title: '私域推理集群', desc: 'GPU POD 自研推理服务，支持批量/流式与 128K 长上下文。' },
				{ title: '运营自动执行', desc: '将结果推送到客服、营销、供应链系统，闭环联动。' },
			],
			abilities: [
				{ title: '多模态融合', metric: '92%理解率', desc: '图文/语音/位置并行解析，支持游记与监控影像联合推理。' },
				{ title: '实时感知', metric: '1.2s延迟', desc: '与物联传感器、客流雷达对接，秒级触发调度策略。' },
				{ title: '行程编排', metric: '98%满意度', desc: '自动规划吃住行玩购线路，匹配人群画像与预算。' },
				{ title: '知识问答', metric: '10w+/日答复', desc: '接入目的地知识库，提供低幻觉率客服对答。' },
			],
			scenarios: [
				{ name: '目的地运营', desc: '监测景区热力与评价，自动产出运营决策与调度建议。', tip: '支持联动城市大脑进行跨景区协同。' },
				{ name: '智能客服', desc: '以行业语料微调，提供语音/文本双通道问答。', tip: '可在微信小程序与APP统一接入。' },
				{ name: '营销洞察', desc: '结合旅客偏好和实时价格，生成投放文案与人群圈选。', tip: '与短信/企微等渠道联动投放。' },
			],
			shortcuts: [
				'生成杭州亲子三日游',
				'分析客流与天气预警',
				'输出客服高频问答',
				'优化周末主题活动',
			],
			insights: [
				{ label: '高峰预测', value: '＋18.3%', detail: '三亚亲子客群未来48小时增幅' },
				{ label: '客诉拦截', value: '92条', detail: '自动预警并派单处理' },
				{ label: 'AI行程生成', value: '1,276份', detail: '今日已下发到旅行顾问' },
			],
		}
	},
	methods: {
		sendMessage() {
			if (!this.prompt || this.loading) return
			const question = this.prompt
			this.messages.push({ role: 'user', text: question })
			this.prompt = ''
			this.loading = true
			this.$nextTick(this.scrollToBottom)

			setTimeout(() => {
				const reply = this.generateReply(question)
				this.messages.push({ role: 'assistant', text: reply })
				this.loading = false
				this.latency = 120 + Math.round(Math.random() * 40)
				this.$nextTick(this.scrollToBottom)
			}, 600)
		},
		applyShortcut(text) {
			if (this.loading) return
			this.prompt = text
		},
		generateReply(question) {
			const locationKey = this.extractLocation(question)
			const intent = this.detectIntent(question)
			if (locationKey) {
				const profile = this.cityProfiles[locationKey] || this.createDynamicProfile(locationKey)
				return this.composeCityReply(question, profile)
			}
			const replies = {
				identity: `我是小知，部署在你的私有算力集群上的文旅大模型助手，会感知你当前的定位（目前识别为${this.userCity}），结合实时天气与景区热力做行程和运营决策。`,
				deploy: '当前集群采用多 GPU POD 架构，可根据访问量弹性扩缩，并支持在企业内网完成微调与推理，满足安全合规要求，同时内置气象与客流行情数据。',
				itinerary: '我会同步解析目的地天气、景点承载与客群画像，输出吃住行玩购一体化行程，并生成客服话术与运营排班。',
				data: '小知持续拉取气象、口碑、客流等指标，通过多模态建模生成预测报告，再把结果推送到运营指挥大屏并提醒现场执行。',
				support: '可与客服、评论、企微等渠道联动，对用户问题即时响应，并把处理结果同步到 CRM，闭环跟进。',
				default: `已根据你的问题「${question}」调用私有大模型推理：推荐联动目的地知识库、实时气象与客流热力数据完成决策，输出可直接落地的运营步骤。`,
			}
			return replies[intent] || replies.default
		},
		detectIntent(question) {
			const text = (question || '').toLowerCase()
			const intents = [
				{ name: 'identity', keywords: ['你是谁', 'who', '身份', '介绍'] },
				{ name: 'deploy', keywords: ['部署', '架构', '算力', '服务器', 'gpu', '模型'] },
				{ name: 'itinerary', keywords: ['行程', '路线', '攻略', '旅行', '推荐'] },
				{ name: 'data', keywords: ['预测', '数据', '洞察', '客流', '报表'] },
				{ name: 'support', keywords: ['客服', '回复', '问答', '消息', '咨询'] },
			]
			for (const intent of intents) {
				if (intent.keywords.some(keyword => text.includes(keyword))) {
					return intent.name
				}
			}
			return 'default'
		},
		extractLocation(question) {
			if (!question) return null
			const text = question.replace(/\s/g, '')
			const keys = Object.keys(this.cityProfiles)
			for (const key of keys) {
				if (text.includes(key)) return key
			}
			const patterns = [
				/生成([\u4e00-\u9fa5]{2,6})/,
				/去([\u4e00-\u9fa5]{2,6})/,
				/到([\u4e00-\u9fa5]{2,6})/,
				/安排([\u4e00-\u9fa5]{2,6})/,
				/([\u4e00-\u9fa5]{2,6})亲子/,
			]
			for (const pattern of patterns) {
				const match = text.match(pattern)
				if (match && match[1]) {
					const city = this.sanitizeCityName(match[1])
					if (city) return city
				}
			}
			return null
		},
		sanitizeCityName(name) {
			return (name || '').replace(/(亲子|亲子游|三日游|三天游|行程|路线|攻略|旅行|旅游)$/, '')
		},
		composeCityReply(question, profile) {
			const { name, weather, attractions, smartActions } = profile
			const origin = this.userCity
			const key = `${origin}-${name}`
			const routePlan = this.travelMatrix[key] || this.travelMatrix[`${name}-${origin}`] || null
			const spots = attractions.slice(0, 3).join('、')
			let routeText = '已为你生成本地出行方案，可按需自定义交通方式。'
			let budgetText = ''
			if (routePlan) {
				const { mode, duration, route, budget } = routePlan
				const total = budget.transport + budget.daily * budget.days
				routeText = `从「${origin}」出发推荐 ${mode}，全程 ${duration}。路线建议：${route.join(' → ')}。`
				budgetText = `费用估算：交通约 ¥${budget.transport}，当地花销约 ¥${budget.daily} / 天 × ${budget.days} 天，总计约 ¥${total}（含家庭亲子体验）。`
			}
			return `已锁定目的地「${name}」，未来 72 小时天气趋势：${weather}。推荐将${spots}设为主线场景，结合实时客流在高峰前 30 分钟做分流提示；${smartActions} ${routeText}${budgetText ? ' ' + budgetText : ''} 我已同步排产脚本并支持你在行前随时调整。`
		},
		createDynamicProfile(name) {
			return {
				name,
				weather: '暂未获取实时天气，建议提前 1 天关注中央气象台或微信小程序最新预报。',
				attractions: ['地标景区', '热门商圈', '夜游线路'],
				smartActions: '可基于大数据挑选高评分景点，结合本地交通实时拥堵数据自动排布行程，必要时触发客流分级策略。',
			}
		},
		scrollToBottom() {
			this.scrollTop += 500
		},
	},
}
</script>

<style lang="scss" scoped>
.ai-assistant {
	min-height: 100vh;
	padding: 0 32rpx 40rpx;
	background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 35%, #f5f7fa 100%);
	color: #2c3e50;
	box-sizing: border-box;

	.section-card {
		margin-top: 24rpx;
		padding: 28rpx;
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.95);
		border: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.06);
	}

	.hero-card {
		margin-top: 32rpx;
		padding: 32rpx;
		background: radial-gradient(circle at top right, rgba(255, 218, 51, 0.15), rgba(245, 247, 250, 0.95));
		backdrop-filter: blur(14rpx);
		position: relative;
		overflow: hidden;
	}

	.hero-card::after {
		content: '';
		position: absolute;
		right: -60rpx;
		top: -40rpx;
		width: 320rpx;
		height: 320rpx;
		background: rgba(255, 218, 51, 0.08);
		filter: blur(10rpx);
		border-radius: 50%;
	}

	.hero-card > * {
		position: relative;
		z-index: 1;
	}

.hero {
		.brand-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20rpx;
			margin-bottom: 16rpx;
			flex-wrap: wrap;
		}

		.brand-meta {
			display: flex;
			flex-direction: column;
			gap: 8rpx;
		}

		.brand-badge {
			align-self: flex-end;
			padding: 8rpx 24rpx;
			border-radius: 999rpx;
			background: rgba(0, 0, 0, 0.06);
			color: #5a6c7d;
			font-size: 24rpx;
			letter-spacing: 2rpx;
		}

		.brand-tagline {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
		}

		.brand-name {
			font-size: 44rpx;
			font-weight: 700;
			letter-spacing: 4rpx;
			background: linear-gradient(120deg, #ff9500, #ff6b00, #e65100);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.brand-subtitle {
			font-size: 26rpx;
			color: rgba(0, 0, 0, 0.65);
			letter-spacing: 2rpx;
		}

		.hero-desc {
			font-size: 26rpx;
			line-height: 1.6;
			color: rgba(0, 0, 0, 0.75);
			margin-bottom: 24rpx;
		}

		.hero-tags {
			display: flex;
			gap: 12rpx;

			.tag {
				padding: 8rpx 20rpx;
				border-radius: 999rpx;
				background: rgba(255, 165, 0, 0.12);
				color: #e65100;
				font-size: 24rpx;
			}
		}
	}

	.status-card {
		.status-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			font-size: 28rpx;

			.status-pill {
				padding: 6rpx 20rpx;
				border-radius: 999rpx;
				background: rgba(59, 222, 155, 0.2);
				color: #3bde9b;
				font-size: 22rpx;
			}
		}

		.status-row {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			color: rgba(0, 0, 0, 0.75);
			padding: 12rpx 0;
			border-bottom: 1px solid rgba(0, 0, 0, 0.06);

			&:last-child {
				border-bottom: none;
			}
		}
	}

	.chat-panel {
		max-height: 560rpx;
		min-height: 360rpx;
		padding: 24rpx;
		background: rgba(248, 249, 250, 0.6);
		box-sizing: border-box;

		.chat-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.chat-title {
			font-size: 30rpx;
			font-weight: 600;
		}

		.chat-subtitle {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.45);
			margin-top: 4rpx;
		}

		.chat-status {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.65);
		}

		.dot-online {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background: #53e191;
			box-shadow: 0 0 10rpx rgba(83, 225, 145, 0.8);
		}

		.bubble {
			max-width: 85%;
			margin-bottom: 24rpx;
			padding: 20rpx;
			border-radius: 24rpx;
			font-size: 26rpx;
			line-height: 1.5;
			white-space: pre-wrap;

			&.assistant {
				background: rgba(0, 0, 0, 0.04);
				color: #2c3e50;
				border-top-left-radius: 8rpx;
			}

			&.user {
				align-self: flex-end;
				margin-left: auto;
				background: rgba(255, 149, 0, 0.15);
				color: #2c3e50;
				border-top-right-radius: 8rpx;
			}

			.bubble-role {
				font-size: 20rpx;
				margin-bottom: 8rpx;
				color: rgba(0, 0, 0, 0.4);
			}
		}

		.typing {
			display: flex;
			gap: 8rpx;
			padding: 16rpx 0;

			.dot {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
				animation: blink 1s infinite ease-in-out;

				&:nth-child(2) {
					animation-delay: 0.2s;
				}

				&:nth-child(3) {
					animation-delay: 0.4s;
				}
			}
		}
	}

	.composer {
		padding: 20rpx;
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.95);
		display: flex;
		gap: 16rpx;
		align-items: center;

		.composer-input {
			flex: 1;
			background: rgba(0, 0, 0, 0.04);
			border-radius: 20rpx;
			padding: 0 10rpx;
		}

		.composer-btn {
			width: 160rpx;
			border-radius: 999rpx;
			background: linear-gradient(120deg, #ffd24c, #ffae00);
			color: #2a1f00;
			font-weight: 600;
		}
	}

	.pipeline-card {
		.pipeline-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			font-size: 30rpx;
		}

		.pipeline-version {
			padding: 4rpx 20rpx;
			border-radius: 999rpx;
			background: rgba(255, 218, 51, 0.12);
			color: #ffda33;
			font-size: 22rpx;
		}

		.pipeline-node {
			display: flex;
			gap: 20rpx;
			padding: 18rpx 0;
			border-bottom: 1px solid rgba(0, 0, 0, 0.08);

			&:last-child {
				border-bottom: none;
			}
		}

		.node-index {
			width: 56rpx;
			height: 56rpx;
			border-radius: 16rpx;
			background: rgba(255, 149, 0, 0.1);
			color: #e65100;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			font-weight: 600;
		}

		.node-title {
			font-size: 30rpx;
			margin-bottom: 6rpx;
		}

		.node-desc {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.6);
			line-height: 1.6;
		}
	}

	.ability-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;

		.ability-item {
			padding: 24rpx;
			border-radius: 22rpx;
			background: rgba(248, 249, 250, 0.6);
			border: 1px solid rgba(0, 0, 0, 0.06);
		}

		.ability-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12rpx;
		}

		.ability-title {
			font-size: 28rpx;
		}

		.ability-metric {
			font-size: 24rpx;
			color: #ff9500;
		}

		.ability-desc {
			font-size: 24rpx;
			line-height: 1.5;
			color: rgba(0, 0, 0, 0.6);
		}
	}

	.scenario-card {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.scenario-item {
			padding: 20rpx;
			border-radius: 18rpx;
			background: rgba(248, 249, 250, 0.8);
			border: 1px solid rgba(0, 0, 0, 0.06);
		}

		.scenario-name {
			font-size: 30rpx;
			margin-bottom: 8rpx;
		}

		.scenario-desc {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.65);
			line-height: 1.5;
			margin-bottom: 8rpx;
		}

		.scenario-tip {
			font-size: 22rpx;
			color: #ff9500;
		}
	}

	.quick-card {
		.quick-title {
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 16rpx;
		}

		.chip-group {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		.chip {
			padding: 12rpx 28rpx;
			border-radius: 999rpx;
			background: rgba(255, 149, 0, 0.08);
			border: 1px solid rgba(255, 149, 0, 0.2);
			font-size: 24rpx;
			color: #e65100;
		}
	}

	.insight-card {
		background: rgba(255, 255, 255, 0.95);
		.insight-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
		}

		.insight-title {
			font-size: 30rpx;
		}

		.insight-pulse {
			padding: 4rpx 20rpx;
			border-radius: 999rpx;
			background: #f54e68;
			color: #fff;
			font-size: 22rpx;
			animation: pulse 1.6s infinite;
		}

		.insight-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 16rpx;
		}

		.insight-item {
			padding: 20rpx;
			border-radius: 18rpx;
			background: rgba(248, 249, 250, 0.8);
			border: 1px solid rgba(0, 0, 0, 0.06);
		}

		.insight-label {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
		}

		.insight-value {
			font-size: 36rpx;
			font-weight: 600;
			margin: 6rpx 0;
			color: #ff9500;
		}

		.insight-foot {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.65);
		}
	}
}

@keyframes blink {
	0%, 80%, 100% {
		opacity: 0.3;
		transform: translateY(0);
	}
	40% {
		opacity: 1;
		transform: translateY(-4rpx);
	}
}

@keyframes pulse {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
		box-shadow: 0 0 20rpx rgba(245, 78, 104, 0.6);
	}
	100% {
		opacity: 0.5;
	}
}
</style>

